<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		/*手机页面*/
		@media (max-width: 767px) { 
			.article-title {
				padding: 10px;
			}
			.article-title .title {
				width: calc(100% - 110px);
			}
			.article-title .share-num img {
				margin-right: 5px;
			}
			.article-title .share-num img:nth-child(3) {
				margin-left: 10px;
			}
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="article-title">
			<div class="title">文章标题</div>
			<div class="share-num">
				<img src="../../img/myExtension/content-read.png" /><span></span><img src="../../img/myExtension/content-share.png" /><span></span>
			</div>
		</div>
		<div class="table-list">
			<div class="table-btn">
				<button id="exportTable" class="btn btn-default" type="button">导出表格</button>
			</div>
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>序号</th>
						<th>名字</th>
						<th>电话</th>
						<!--<th>村</th>
						<th>组</th>
						<th>种植面积</th>-->
						<th>时间</th>
						<th>留言</th>
					</tr>
				</thead>
				<tbody>
					<!--<tr>
						<td>1</td>
						<td>多浪</td>
						<td>1383838438</td>
						<td>2018-5-4 16:36:22</td>
						<td>我留言了了啊啊拉拉安抚</td>
					</tr>-->
				</tbody>
			</table>
		</div>
		<nav id="page" class="text-center" aria-label="Page navigation">
			<ul class="pagination">
			</ul>
		</nav>
	</div>	
	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var userID,companyID,articleID;
		var isPageInit = true;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			articleID = base.getParameter("articleID");
			//获取文章信息
			base.postData(base.url.articleDataInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackArticleInfo);
			initEnrollInfoList(1);
		});
		function callbackArticleInfo(data) {
			if (data.success) {
				$(".article-title .title").text(data.context.articleTitle);
				$(".article-title .share-num").html('<img src="../../img/myExtension/content-read.png" /><span>'+data.context.articleReadNum+'</span><img src="../../img/myExtension/content-share.png" /><span>'+data.context.articleShareNum+'</span>');
			}
		}
		function initEnrollInfoList(page){
			//获取报名列表
			base.postData(base.url.getEnrollInfoList, {companyID:companyID,articleID:articleID,pageNo:page}, callbackGetEnrollInfoList);
		}
		function callbackGetEnrollInfoList(data){
			if (data.success) {
				var html = '';
				for (var i=0; i<data.context.enrollInfoList.length; i++) {
					html += pingEnrollInfoList(data.context.enrollInfoList[i], i+1);
				}
				$(".table-list tbody").html(html);
				if (isPageInit){
					isPageInit = false;
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page").initPage(page);
							initEnrollInfoList(page.currentPage);
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page").initPage(page);
				}
			}
		}
		function pingEnrollInfoList(data,i){
			var html = '<tr>'+
						'	<td>'+i+'</td>'+
						'	<td>'+data.userName+'</td>'+
						'	<td>'+data.phone+'</td>'+
						/*'	<td>'+data.village+'</td>'+
						'	<td>'+data.groups+'</td>'+
						'	<td>'+data.plant+'</td>'+*/
						'	<td>'+data.enrollTime+'</td>'+
						'	<td>'+data.remark+'</td>'+
						'</tr>';
			return html;
		}
		//点击导出表格
		$("#exportTable").click(function(){
			if ($(".table-list tbody").find("tr").length == 0) {
				return;
			}
			window.location.href=base.url.exportEnrollInfo+"?userID="+userID+"&companyID="+companyID+"&articleID="+articleID;
		});
	</script>
</body>
</html>
